<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="/assets/css/bootstrap.css" rel="stylesheet">
     <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
    <style>
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #eee;
        }

        .form-signin {
            max-width: 330px;
            padding: 15px;
            margin: 0 auto;
        }

        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
        }

        .form-signin .checkbox {
            font-weight: normal;
        }

        .form-signin .form-control {
            position: relative;
            height: auto;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px;
            font-size: 16px;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="text"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    </style>
</head>
<body>
<div class="container">

    <form class="form-signin">
        <h2 class="form-signin-heading">支出</h2>
        <label for="amount" class="sr-only">金额</label>
        <input type="number" name="amount" id="amount" class="form-control" value="" placeholder="金额" required
               autofocus>
        <br>
        <label for="use" class="sr-only">用途</label>
        <input type="text" name="password" id="use" class="form-control" value="" placeholder="用途" required>
        <label for="category" class="sr-only">分类</label>
        <select name="category" id="category" class="form-control" style="height: 36px;">
        {{ range $key, $value := .billCategories }}
            <option value="{{ $value.Id }}">{{ $value.Name }}</option>
        {{ end }}
        </select>
        <br>
        <button class="btn btn-lg btn-primary btn-block" id="submitBtn" type="button">记一笔</button>
    </form>
</div> <!-- /container -->
</body>
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script>
    function Do() {
        let amount = $("#amount").val();
        if (!amount) {
            alert("金额不能为空");
            return;
        }

        let use = $("#use").val();
        if (!use) {
            alert("用途不能为空");
            return;
        }

        let category = $("#category").val();
        if (!category) {
            alert("分类不能为空");
            return
        }
        let d = {
            amount: amount,
            use: use,
            category: category
        };


        $.ajax({
            url: "/v1/bills",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(d),
            success: function (res) {
                if (res && res.code === 0) {
                    $("#amount").val("");
                    alert("提交成功");
                } else {
                    alert("提交成功, 失败消息:" + res.message);
                }
            },
            error: function (res) {
                alert("发送请求失败");
            }
        })
    }

    $("#submitBtn").on("click", Do);
    $("#amount").on("keyup", function (event) {
        if (event.keyCode === 13) {
            Do()
        }
    });

    $("#use").on("keyup", function (event) {
        if (event.keyCode === 13) {
            Do()
        }
    });

</script>
</html>